<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu map API</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<style>
html{height:100%;}
body{height:90%;margin:0px;padding:0px;}
#icon{height:100%;}
</style>
</head>

<body>
<div id="icon"></div>
<script>
/**
 *覆盖物
 *百度地图API提供了如下覆盖物：
 	Overlay: 覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
	Marker: 标注表示地图上的点，可自定义标注的图标。
	Labek: 表示地图上的文本标注，您可以自定义标注的文本内容。
	Polyline: 表示地图上的折线。
	Polygon: 表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色
	Circle: 表示地图上的圆。
	infoWindow: 信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
	可以使用map.addOverlay方法想地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于infoWindow。
 *
 *
 */
/**
 * 标注(表示地图上的点)
 API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。
 Marker的构造函数的参数为Point和MarkerOptions（可选）。
 注意：当您使用自定义图标时，标注的地理坐标点将位于标注所有图标的中心位置，您可通过Icon的offset属性修改标定位置。
 */
var map = new BMap.Map('icon');
var point = new BMap.Point(121.30, 31.15);
map.centerAndZoom(point, 13);
//var marker = new BMap.Marker(point);
//map.addOverlay(marker);
map.addControl(new BMap.NavigationControl()); //开启百度平移缩放控件

function SquareOverlay(center){  
 this._center = center;
 this.width = 32;
 this.height = 32;
}  
// 继承API的BMap.Overlay  
SquareOverlay.prototype = new BMap.Overlay(); 
SquareOverlay.prototype.initialize = function(map){  
// 保存map对象实例  
 this._map = map;      
 // 创建div元素，作为自定义覆盖物的容器  
 var div = document.createElement("div");  
 div.style.position = "absolute";      
 // 可以根据参数设置元素外观  
 div.style.width = this.width + "px";  
 div.style.height = this.height + "px";  
 div.style.background = "url('/imgs/marker2.gif')";    
 // 将div添加到覆盖物容器中  
 map.getPanes().markerPane.appendChild(div);    
 // 保存div实例  
 this._div = div;    
 // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  
 // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  
 return div;  
}
// 实现绘制方法  
SquareOverlay.prototype.draw = function(){  
// 根据地理坐标转换为像素坐标，并设置给容器  
 var position = this._map.pointToOverlayPixel(this._center);  
 this._div.style.left = position.x - this.width / 2 + "px";  
 this._div.style.top = position.y - this.height / 2 + "px";  
}
SquareOverlay.prototype.show = function(){  
 if (this._div){  
   this._div.style.display = "";  
 }  
}    
// 实现隐藏方法  
SquareOverlay.prototype.hide = function(){  
 if (this._div){  
   this._div.style.display = "none";  
 }  
}

function addPoint(point){
//function addPoint(x,y){
	//var point = new BMap.Point(x,y);  
	map.centerAndZoom(point, 15);
	// 添加自定义覆盖物  
	var mySquare = new SquareOverlay(map.getCenter());  
	map.addOverlay(mySquare);
}

//随机向地图添加是个标注
//var bounds = map.getBounds();
//var lngSpan = bounds.maxX - bounds.minX;
//var latSpan = bounds.maxY - bounds.minY;
<?php $common='';?>
var points = new Array(
<?php 
	foreach($client as $c){?>
		<?=$common;?>new Array('<?=$c['lng']?>', '<?=$c['lat']?>')
		<?php if($common==''){$common=',';}
	}?>
);
for(var i=0; i<<?=$count;?>; i++) {
	var point = new BMap.Point(points[i][0], points[i][1]);
	addPoint(point);
}

</script>
</body>
</html>
